/* 
  app home首页
 */
<template>
  <yd-layout>
    <yd-navbar slot="navbar" title="首页" />
    <yd-pullrefresh :callback="handleRefresh" ref="pullrefresh" style="position:absolute;top:0;left:0;bottom:0;right:0;">
      <div>
        <div>
          <img class="banner-img" v-lazy="homeBanner1[0]" />
          <div class="index-home-userStatusBar">
            剩余金额: ￥{{balanceStr}}
          </div>
        </div>
        <div class="list-title">项目</div>
        <yd-list class="list-wrap" :theme="1">
          <yd-list-item v-for="(item, i) in data.items" :key="i" type="link" :href="`/store/detail/${i}`">
            <img slot="img" src="//static.shikee.com/common/img/blank.gif" />
            <span slot="title">{{item.tname}}</span>
          </yd-list-item>
        </yd-list>
        <div class="list-title">产品</div>
        <yd-list class="list-wrap" :theme="1">
          <yd-list-item v-for="(item, i) in data.products" :key="i" type="link" :href="`/store/detail/${i}`">
            <img slot="img" src="//static.shikee.com/common/img/blank.gif" />
            <span slot="title">{{item.pname}}</span>
          </yd-list-item>
        </yd-list>
        </div>
      </div>
      
    </yd-pullrefresh>
    <layout-home-tabbar slot="tabbar" selected="home" @change:tab="handleTabChange" />
  </yd-layout>
</template>

<script>
import pageMixin from "../../../mixins/page";
import LayoutHomeTabbar from "../layout/home-tabbar";
import $ from "jquery";
import { bannerImg } from "../../../test/vars";

export default {
  mixins: [pageMixin],
  components: { LayoutHomeTabbar },
  data() {
    return {
      homeBanner1: [bannerImg],
      data: {
        amount: null, // 总金额
        balance: null, // 剩余金额
        items: [],
        products: [],
      },
      loaded: false,
    };
  },
  computed: {
    selectedHomeTab() {
      return this.$store.state.home.selected;
    },
    uid() {
      return this.$store.state.uid;
    },
    amountStr() {
      if (this.data.amount == null) {
        return "--";
      } else {
        return Number(this.data.amount / 100).toFixed(2);
      }
    },
    balanceStr() {
      if (this.data.balance == null) {
        return "--";
      } else {
        return Number(this.data.balance / 100).toFixed(2);
      }
    },
  },
  watch: {
    selectedHomeTab(val, oldVal) {
      if (val === oldVal) {
        return;
      }
      this.onPageView();
    },
  },
  methods: {
    handleTabChange(val) {
      // TODO: 此处 home tab 的name 与 route 的name 相同
      this.$router.push({
        name: val,
      });
    },
    handleRefresh() {
      setTimeout(() => {
        this.$refs.pullrefresh.$emit("ydui.pullrefresh.finishLoad");
      }, 1000);

      //this.$bus.$emit("refresh:homeIndex");
    },
    // 加载首页信息
    async loadData() {
      return new Promise(async (resolve, reject) => {
        let res = await this.$api.userHomeInfo({ uid: this.uid }).catch(err => {
          reject(err);
        });
        if (res) {
          this.data.amount = res.amount;
          this.data.balance = res.balance;
          this.data.items = res.items;
          this.data.products = res.products;
          resolve(res);
        } else {
          reject();
        }
      });
    },
    init() {
      this.loadData().then(data=>{
        this.loaded = true;
      }).catch(err=>{
        
      })
    },
  },
  beforeDestroy() {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
.index-home-userStatusBar {
  background-color: #fff;
  padding: 0.2rem;
}
.mint-tab-item {
  padding: 0.2rem 0;
  &.is-selected {
    margin-bottom: 0;
    border-bottom: none;
  }
}
.list-wrap {
}
.list-title {
  padding: 10px 0 10px;
  text-align: center;
  position: relative;
  &:before {
    content: " ";
    display: block;
    height: 1px;
    background-color: #999;
    left: 2%;
    right: 55%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  &:after {
    content: " ";
    display: block;
    height: 1px;
    background-color: #999;
    left: 55%;
    right: 2%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
